<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<form:form commandName="taskMain" cssClass="form-horizontal" role="form" onsubmit="return false;" enctype="multipart/form-data" >
    <div class="form-group">
        <label class="col-sm-2 control-label ">子事项</label>
        <div class="col-sm-8">
            <select class="form-control" name="sysId" onchange="subDeptList(this)">
                <c:forEach items="${taskSubs}" var="taskSub">
                    <option value="${taskSub.sysId}">${taskSub.subName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label ">牵头单位</label>
        <div class="col-sm-8">
            <select multiple="true" class="e2 filterUnit" onchange="Monitor(this)">
            </select>
            <input type="hidden" value="" name="leadDeptIds">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label ">协办单位</label>
        <div class="col-sm-8">
            <select multiple="true" class="e22 filterUnit" onchange="Monitor(this)">
            </select>
            <input type="hidden" value="" name="assistDeptIds">
        </div>
    </div>
</form:form>
<script src="<s:url value="/assets/js/chosen.jquery.js"></s:url>"></script>
<script src="<s:url value="/assets/js/ajaxfileupload.js"></s:url>"></script>
<script src="<s:url value="/assets/js/modal/modal.js"></s:url>"></script>
<script src="<s:url value="/assets/js/select2.js"></s:url>"></script>
<script src="<s:url value="/assets/laydate/laydate.dev.js"></s:url>"></script>

<script type="text/javascript">
    $(".e2").select2({
        placeholder: "请输入或点击选择牵头单位",
        width: "100%",
        closeOnSelect: false,
        allowClear: true,
    });
    $(".e22").select2({
        placeholder: "请输入或点击选择协办单位",
        width: "100%",
        closeOnSelect: false,
        allowClear: true,
    });
    var danwei = "";
    var danweiArr = [];
    (function () {
            var $taskSubId = $("select[name=sysId]").find("option:selected").val();
            $.ajax({
                url:"/taskMain/subDeptList/"+$taskSubId,
                async:false,
                success:function (data) {
                    for (var i = 0; i<data.length; i++){
                        danwei += " <option value=\""+ data[i].sysId +"\">"+data[i].deptName +"</option>";
                        danweiArr.push({danweiSysId:data[i].sysId,danweiName:data[i].deptName});
                    }
                }
            });
        $("select.filterUnit").html(danwei);
        })();
    function subDeptList(el) {
        //清空原来值
        $(".filterUnit").select2("val", " ");
        $("input[name=leadDeptIds]").val(" ");
        $("input[name=assistDeptIds]").val(" ");
        var $sysId = $(el).find("option:selected").val();
        var danwei = "";
        $.ajax({
            url:"/taskMain/subDeptList/"+$sysId,
            async:false,
            success:function (data) {
                for (var i = 0; i<data.length; i++){
                    danwei += " <option value=\""+ data[i].sysId +"\">"+data[i].deptName +"</option>";
                    danweiArr.push({danweiSysId:data[i].sysId,danweiName:data[i].deptName});
                }
            }
        })
        $("select.filterUnit").html(danwei);
    }
    function Monitor(data)  {
        var $data = $(data).val();//获取全部select的值
        if (!$data){
            return console.log("铁憨憨");
        }
         //临时数组存放
        var tempArray1 = []; //临时数组1
        var tempArray2 = []; //临时数组2
        for (var i = 0; i < $data.length; i++) {
            tempArray1[$data[i]] = true; //将数array2 中的元素值作为tempArray1 中的键，值为true；
        }
        for (var i = 0; i < danweiArr.length; i++) {
            if (!tempArray1[danweiArr[i].danweiSysId]) {
                tempArray2.push(danweiArr[i]); //过滤array1 中与array2 不相同的元素；
            }
        }
        var filterUnit;
        for (var i = 0; i<tempArray2.length; i++){
            filterUnit +=  " <option value=\""+ tempArray2[i].danweiSysId +"\">"+tempArray2[i].danweiName +"</option>"
        }
        $(data).parent().parent().siblings().find("select.filterUnit").html(filterUnit);
    };
    //将val数组用,分割
    $(".filterUnit").change(function () {
        var $selectVal = $(this).val();
        if ($selectVal) {
            $selectVal.join(",");
            $(this).siblings("input").val($selectVal);
        }
    })

</script>
